<template>
  <h1 class="m-v-30">类与样式绑定</h1>
  <h3 class="m-v-10">绑定html的class</h3>
  <div>
    1. <span :class="{active:isActive}">绑定对象</span><button @click="changeActive">改变状态</button><br>
    2. <span :class="classObj">绑定计算属性</span> <button @click="changeActive">改变状态</button><br>
    3. <span :class="classArr">绑定数组</span><button @click="changeActive">改变状态</button><br>
    3. <span :class="[isActive?'active':'']">绑定数组中三元表达式</span><button @click="changeActive">改变状态</button><br>
  </div>
  <h3 class="m-v-10">在组建上使用</h3>
  <div>
    1. 指定在那个根元素上使用
  </div>

  <h3 class="m-v-10">绑定内敛样式</h3>
  <div>
    1. <span :style="{color:activeColor}">绑定对象</span><br>
    2. <span :style="[classObj]">绑定样式对象数组</span>
    3.<div :style="{display:['-webkit-box', '-ms-flexbox', 'flex']}">样式多值</div>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from "vue";

const isActive = ref(false)

function changeActive() {
  isActive.value = !isActive.value
}

const classObj = computed(() => {
  return {
    active: isActive.value ? true : false,
    color: '#f00'
  }
})

const classArr = reactive(['active'])

const activeColor = ref('#f00')
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
</style>